import { Component, EventEmitter, Injector, Input, Output, ViewChild } from '@angular/core';
import { BsModalRef, ModalDirective } from 'ngx-bootstrap/modal';
import { AppComponentBase } from '@shared/common/app-component-base';
import { LayoutElement } from './layout-element';
import { editStyleComponent } from './edit-style.component';
import { LayoutEditorHelper } from './layout-editor-helper';

@Component({
    templateUrl: './edit-properties-modal.component.html'
})
export class editPropertiesModalComponent extends AppComponentBase {

    callback: ()=>void;
    item:LayoutElement;

    saving = false;

    @ViewChild('htmlStyle') htmlStyle: editStyleComponent;
    @ViewChild('htmlMobileStyle') htmlMobileStyle: editStyleComponent;

    //htmlClass: string;

    constructor(
        public bsModalRef: BsModalRef,
        injector: Injector
    ) {
        super(injector);
    }


    shown(item: LayoutElement) {
        this.item = item;
        //this.htmlClass  = item.htmlClass;

        if (item.htmlStyle === null) {
            item.htmlStyle = LayoutEditorHelper.getDefaultStyleValue(item, false);
        }
        if (item.htmlMobileStyle === null) {
            item.htmlMobileStyle = LayoutEditorHelper.getDefaultStyleValue(item, true);
        }

        
        this.htmlStyle.type = item.contentTypeLabel;
        this.htmlMobileStyle.type = item.contentTypeLabel;

        this.htmlStyle.editData = item.htmlStyle;
        this.htmlMobileStyle.editData = item.htmlMobileStyle;
    }

    close(): void {
        this.bsModalRef.hide();
    }

    rollbackPc(): void {
        this.htmlStyle.editData = LayoutEditorHelper.getDefaultStyleValue(this.item, false);
    }


    rollbackMobile(): void {
        this.htmlMobileStyle.editData = LayoutEditorHelper.getDefaultStyleValue(this.item, true);
    }

    save() {
        if(this.item){
            //this.item.htmlClass = this.htmlClass;

            this.htmlStyle.beforeSave();

            this.item.htmlStyle = this.htmlStyle.data;

            this.htmlMobileStyle.beforeSave();

            this.item.htmlMobileStyle = this.htmlMobileStyle.data;

            this.item.setTemplateStyles();

            this.item.setItemHtml();

            this.callback();
        }
        this.close();
    }
}
